<template>
  <h3>{{ text }}</h3>
  <div style="display: flex; justify-content: center">
    <component
      :is="componentMap[config.component]"
      v-bind="calcPropsBindData(config.component, config)"
    ></component>
  </div>
</template>

<script  setup>
import { ref, reactive } from "vue";
import DataNumber from "./DataNumber.vue";

const componentMap = {
  DataNumber,
};

const text = ref("");
text.value = "演示Props的定义和传参";

function calcPropsBindData(config) {
  const { component } = config;
  const { props } = componentMap[component];
  const propKeys = Object.keys(props);
  const result = {};
  propKeys.map((key) => {
    result[key] = config[key];
  });
  return result;
}

// 组件配置
const config = reactive({
  cid: "1002",
  component: "DataNumber",
  data: 3435,
  position: {
    top: "10px",
    left: "100px",
    zIndex: 3,
  },
  options: {
    animate: false,
    thousandsCharacter: false,
    direction: "horizontal",
    label: "待入馆",
    suffix: "人",
  },
});
</script>

<style scoped>
</style>
